<template>
  <div id="home">
    <div class="leftBar">
      <div class="title">地图管理器</div>
      <div class="menuBar">
        <div class="menuTip" :style="changeTipsPosition"></div>
        <div
          ref="menuList"
          class="menuList"
          v-for="(item) in menuList"
          :key="item.id"
          @click="changeMenu(item.route)"
        >
          <div class="menuLi">
            <img :src="item.imgSrc" :class="item.active?'activeImg':''" />
            <span :class="item.active?'activeInfo':''">{{item.menuName}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <transition name="fade" mode="in-out">
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      // 菜单列表
      menuList: [
        {
          id: 1,
          route: "projectManage",
          menuName: "项目管理",
          imgSrc: require("../assets/images/projectManage.png"),
          active: true
        },
        {
          id: 2,
          route: "personManage",
          menuName: "用户管理",
          imgSrc: require("../assets/images/personManage.png"),
          active: false
        },
        {
          id: 3,
          route: "themeManage",
          menuName: "主题模板管理",
          imgSrc: require("../assets/images/themeManage.png"),
          active: false
        }
      ],
      // tips的位置(top)
      tipsTop: null,
      // 初始化路由页面
      initRouts: "projectManage",
      menuListHeight: "",
      tipsHeight: ""
    };
  },
  computed: {
    // 改变菜单tips的位置(top)
    changeTipsPosition() {
      return {
        top: `${this.tipsTop}px`
      };
    }
  },
  created() {},
  mounted() {
    this.$router.push({ name: this.initRouts });

    setTimeout(() => {
      this.initTipsPos();
    }, 0);
  },
  watch: {},
  methods: {
    initTipsPos() {
      this.menuListHeight = parseFloat(
        window.getComputedStyle(document.querySelector(".menuList"), null)
          .height
      );
      this.tipsHeight = parseFloat(
        window.getComputedStyle(document.querySelector(".menuTip"), null).height
      );
      this.tipsTop = (this.menuListHeight - this.tipsHeight) / 2;
    },
    changeMenu(route) {
      this.menuList.forEach(menu => {
        menu.active = false;
        if (menu.route === route) {
          menu.active = true;
        }
      });

      switch (route) {
        case "projectManage":
          {
            this.tipsTop = (this.menuListHeight - this.tipsHeight) / 2;
          }
          break;
        case "personManage":
          {
            this.tipsTop =
              (this.menuListHeight - this.tipsHeight) / 2 + this.menuListHeight;
          }
          break;
        case "themeManage":
          {
            this.tipsTop =
              (this.menuListHeight - this.tipsHeight) / 2 +
              this.menuListHeight * 2;
          }
          break;
      }

      this.$router.push({ name: route });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
#home {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #f0f2f5;
  .leftBar {
    -webkit-user-select: none;
    width: 220px;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 79px;
      text-align: center;
      line-height: 79px;
      border-bottom: 2px solid rgba(242, 242, 242, 1);
      font-size: 16px;
      font-weight: 400;
      color: rgba(93, 105, 189, 1);
      letter-spacing: 2px;
    }
    .menuBar {
      flex: 1;
      position: relative;
      .menuList {
        position: relative;
        width: 100%;
        height: 70px;
        cursor: pointer;
        .menuLi {
          position: absolute;
          height: 30px;
          width: 216px;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          img {
            width: 15px;
            height: 13px;
            left: 44px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all 0.5s;
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
          }
          .activeImg {
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -ms-filter: grayscale(0);
            -o-filter: grayscale(0);
            filter: grayscale(0);
          }
          span {
            height: 20px;
            line-height: 20px;
            left: 62px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            letter-spacing: 1px;
            font-size: 14px;
            font-weight: 400;
            transition: color 0.5s;
            color: rgba(75, 75, 75, 1);
          }
          .activeInfo {
            color: rgba(93, 105, 189, 1);
          }
        }
      }
      .menuTip {
        position: absolute;
        left: 0;
        width: 4px;
        height: 30px;
        background-color: rgba(93, 105, 189, 1);
        transition: top 0.5s;
      }
    }
  }
  .rightContent {
    flex: 1;
    margin-left: 16px;
    position: relative;
  }
}
</style>
